<template>
  <div class="app-container">
    <div class="filter-container">
        <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
            size="small"
            value-format="yyyy-MM-dd"
            v-model="params['startDate']"
            type="date"
            placeholder="选择开始日期">
        </el-date-picker>
        <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
            size="small"
            value-format="yyyy-MM-dd"
            v-model="params['endDate']"
            type="date"
            placeholder="选择结束日期">
        </el-date-picker>
        <el-input
            @keyup.enter.native="handleFilter"
            size="small"
            style="width: 200px;"
            class="filter-item"
            placeholder="商品名称"
            v-model="params['title']"
        ></el-input>
        <el-input
            @keyup.enter.native="handleFilter"
            size="small"
            style="width: 200px;"
            class="filter-item"
            placeholder="供应商名称"
            v-model="params['providerName']"
        ></el-input>
        <el-button class="filter-item" size="small"  type="primary" v-waves icon="el-icon-search" @click="loadData">搜索</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="goodsNo" align="center" label="编码编号" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="providerName" align="center" label="供应商名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.providerName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="saleCount" align="center" label="累计销量（包含退款）" width="200" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.saleCount}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="saleAmount" align="center" label="累计销售金额（微信金额+积分，包含退款）" width="200" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.saleAmount}}</span>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.pageNo"
        :page-sizes="[10,20,30,50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      params: {
            pageNo: 1,
            pageSize: 10,
            startDate: '',
            endDate: '',
            titile: ''
      },
      tableHeight: 400,
      total: 0
    }
  },
  methods: {
    loadData(){
      this.listLoading = true;
      this.$get('admin/business_report/goods_sale_count',this.params).then(data=>{
        this.listLoading = false;
          this.list = data.rows;
          this.total = data.total;
      }).catch(_ => {
        this.listLoading = false;
      });
    },
    handleCurrentChange() {
      this.loadData();
    },
    handleSizeChange(val) {
      this.params.pageSize = parseInt(`${val}`);
      this.loadData();
    }
  },
  created () {
    this.loadData();
    this.tableHeight = window.innerHeight - 300
  }
}
</script>
